<template>
  <div class="basicCalcu">
    <!-- 指标公式编辑 -->
    <el-dialog
      title="指标公式编辑"
      v-dialogDrag
      :visible.sync="basicCalcuVisible"
      width="70%"
      :before-close="closeCalcuDialog"
      :close-on-click-modal="false"
    >
      <upper-template
        @search="(searchForm.page = 1), queryBasicGoQuery()"
        @clear="
          (searchForm.queryBasicEffectDt = ''),
            (searchForm.queryBasicCnName = ''),
            (searchForm.colDesc = '')
        "
      >
        <!-- 操作按钮区 -->
        <!-- 搜索区 -->
        <template slot="searchArea">
          <el-form
            :model="searchForm"
            ref="searchForm"
            label-width="100px"
            label-position="left"
            size="mini"
          >
            <el-form-item label="生效日期:">
              <el-date-picker
                v-model="searchForm.queryBasicEffectDt"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="表中文名：">
              <el-input
                v-model.trim="searchForm.queryBasicCnName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="字段中文名：">
              <el-input
                v-model.trim="searchForm.colDesc"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-form>
        </template>
        <!-- 显示隐藏区 -->
        <template slot="columnHide">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="item in textData"
              :label="item.label"
              :disabled="item.checkDisabled"
              :key="item.prop"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
      </upper-template>
      <el-table
        :data="tableData"
        @current-change="calcuSelectionChange"
        max-height="200px"
      >
        <el-table-column
          v-if="checkList[0]"
          prop="tabEnName"
          label="表英文名"
        ></el-table-column>
        <el-table-column
          v-if="checkList[1]"
          prop="tabCnName"
          label="表中文名"
        ></el-table-column>
        <el-table-column
          v-if="checkList[2]"
          prop="colName"
          label="字段英文名"
        ></el-table-column>
        <el-table-column
          v-if="checkList[3]"
          prop="colDesc"
          label="字段中文名"
        ></el-table-column>
      </el-table>
      <pagination
        :total="total"
        :current="page"
        @sizesCallBackEvent="handlePaginationSizes"
        @currentCallBackEvent="handlePaginationCurrent"
        @refreshCallBackEvent="handlePaginationRefresh"
      ></pagination>
      <el-row>
        <el-col>
          <p>指标计算结果</p>
        </el-col>
      </el-row>
      <el-row
        style="padding: 20px; border: 1px #697e854b solid; margin-bottom: 20px"
      >
        <el-col>
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('1')"
            >1</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('2')"
            >2</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('3')"
            >3</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('4')"
            >4</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('5')"
            >5</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('6')"
            >6</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('7')"
            >7</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('8')"
            >8</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('9')"
            >9</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('0')"
            >0</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('.')"
            >.</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('+')"
            >+</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('-')"
            >-</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('*')"
            >*</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('/')"
            >/</el-button
          >
          <div></div>
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('(')"
            >(</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton(')')"
            >)</el-button
          >

          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('<')"
            >&lt;</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('>')"
            >&gt;</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('=')"
            >=</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('clear')"
            >C</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('if')"
            >if</el-button
          >

          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('max')"
            >max</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('min')"
            >min</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('avg')"
            >avg</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('sum')"
            >sum</el-button
          >
          <el-button
            size="small"
            class="resetButton"
            @click="operatorButton('count')"
            >count</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="公式结果"
          v-model="formulaText"
          ref="singleText"
          autocomplete="off"
        ></el-input>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="idxEditModalConfirm">确定</el-button>
        <el-button size="small" @click="cancelCalcuM">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { DatasCenter } from "@/api/index";
import { dateFormat } from "@/lib/util.js";
export default {
  name: "basicCalcu",
  props: [
    "basicCalcuVisible",
    "cancelCalcuM",
    "closeCalcuDialog",
    "idxEditModalConfirm",
  ],
  data() {
    return {
      checkList: [],
      searchForm: {
        queryBasicEffectDt: "",
        queryBasicCnName: "",
        colDesc: "",
        page: 1,
        size: 15,
      },
      formulaEditTexts: "",
      queryBasicSelected: [], //指标公式编辑-基础查询-表格选中项
      formulaText: "", //指标公式编辑-返回结果
      queryBasicEffectDt: "", // 生效日期
      queryBasicCnName: "", //表中文名
      colDesc: "", // 字段中文名
      // 第几页
      page: 1,
      // 页面展示个数
      size: 20,
      // 总数
      total: 0,
      tableData: [], // 表格数据
      textData: [
        {
          prop: "tabEnName",
          label: "表英文名",
          align: "center",
          checkDisabled: false,
        },
        {
          prop: "tabCnName",
          label: "表中文名",
          checkDisabled: false,
        },
        {
          prop: "colName",
          label: "字段英文名",
          checkDisabled: false,
        },
        {
          prop: "colDesc",
          label: "字段中文名",
          checkDisabled: false,
        },
      ],
    };
  },
  mounted() {
    this.checkListInit();
  },
  methods: {
    // 默认查询 条件查询
    checkListInit() {
      this.checkList = this.textData.map((v) => {
        return v.label;
      });
    },
    getBasicCalcu() {
      (this.page = 1),
        // 要处理一下回显
        (this.formulaText = this.formulaEditTexts);
      this.queryBasicSelected = [];
      if (this.queryBasicEffectDt) {
        this.queryBasicEffectDt = dateFormat(this.queryBasicEffectDt);
      }
      let form = {
        page: this.page,
        rows: this.size,
        total: this.total,
        effectDt: this.queryBasicEffectDt,
        tabCnName: this.queryBasicCnName,
        colDesc: this.colDesc,
      };
      DatasCenter.findPageBaseData(form).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },
    // 分页查询
    getPageBasicCalcu() {
      this.queryBasicSelected = [];
      if (this.queryBasicEffectDt) {
        this.queryBasicEffectDt = dateFormat(this.queryBasicEffectDt);
      }
      let form = {
        page: this.page,
        rows: this.size,
        total: this.total,
        effectDt: this.queryBasicEffectDt,
        tabCnName: this.queryBasicCnName,
        colDesc: this.colDesc,
      };
      DatasCenter.findPageBaseData(form).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },

    //
    // 重置
    queryBasicReset() {
      (this.queryBasicEffectDt = ""),
        (this.queryBasicCnName = ""),
        (this.colDesc = "");
    },
    queryBasicGoQuery() {
      (this.page = 1), (this.queryBasicSelected = []);
      if (this.queryBasicEffectDt) {
        this.queryBasicEffectDt = dateFormat(this.queryBasicEffectDt);
      }
      let form = {
        page: this.searchForm.page,
        rows: this.searchForm.size,
        total: this.total,
        effectDt: this.searchForm.queryBasicEffectDt,
        tabCnName: this.searchForm.queryBasicCnName,
        colDesc: this.searchForm.colDesc,
      };
      DatasCenter.findPageBaseData(form).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },

    // 处理页面sizes
    handlePaginationSizes(value) {
      this.size = Number(value);
      this.getPageBasicCalcu();
    },

    //处理当前页
    handlePaginationCurrent(value) {
      this.page = Number(value);
      this.getPageBasicCalcu();
      window.removeEventListener("keydown", function () {});
    },

    // 处理刷新回调, 回调参数 boolean
    handlePaginationRefresh() {
      this.getPageBasicCalcu();
    },

    // 选中表格的数据
    calcuSelectionChange(items) {
      //指标公式编辑-基础查询-表格选中
      this.queryBasicSelected = items;
      let command =
        this.queryBasicSelected.colName +
        "@".concat(this.queryBasicSelected.tabEnName);
      this.operatorButton(command);
    },
    async operatorButton(command) {
      const myField = this.$refs.singleText;
      if (command === "clear") {
        this.formulaText = "";
        return;
      }
      if (command === "if") {
        command = "if(--条件--,--符合处理--,--不符合处理--)";
      }

      if (command === "max") {
        command = "max()";
      }
      if (command === "min") {
        command = "min()";
      }
      if (command === "avg") {
        command = "avg()";
      }
      if (command === "sum") {
        command = "sum()";
      }
      if (command === "count") {
        command = "count()";
      }
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        this.formulaText =
          myField.value.substring(0, startPos) +
          command +
          myField.value.substring(endPos, myField.value.length);
        await this.$nextTick(); // 这句是重点, 圈起来
        myField.focus();
        myField.setSelectionRange(
          endPos + command.length,
          endPos + command.length
        );
      } else {
        this.formulaText += command;
      }
    },

    clearIncreaseCalFormula() {
      this.formulaText = "";
    },
  },
};
</script>
<style scoped>
.basicCalcu p {
  font-size: 14px;
  font-weight: bolder;
  line-height: 40px;
}
.basicCalcu >>> .resetButton {
  margin-bottom: 5px;
  min-height: 26px;
  min-width: 62px;
}
</style>